<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('管理员注册页面')"></head>
<head>
    <link rel="stylesheet" th:href="@{/css/front/learner-register.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="common/common :: common_header('','管理员注册页面')"></header>

<article>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6 left">

            </div>
            <!-- 右边表格部分 -->
            <div class="layui-col-md6 right">
                <div class="layui-card" >
                    <div class="layui-card-header">管理员注册</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户账户</label>
                                <div class="layui-input-block">
                                    <input type="text" id="learnerAccount" name="userAccount" required  lay-verify="required" placeholder="请输入用户账户" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="userPassword" name="userPassword" required  lay-verify="required" placeholder="请输入用户密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">确认密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="userPassword_" name="userPassword_" required  lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">手机号码</label>
                                <div class="layui-input-block">
                                    <input type="number" name="userPhone" required  lay-verify="required|phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">身份证号</label>
                                <div class="layui-input-block">
                                    <input type="number" name="userNumber" required  lay-verify="required|number" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">个人邮箱</label>

                                <div class="layui-input-inline">
                                    <input type="email" name="userEmail" required  lay-verify="required|email" placeholder="请输入个人邮箱" autocomplete="off" class="layui-input">
                                </div>
                                <div >
                                    <button lay-submit lay-filter="sendCode">获取验证码</button>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">验证码</label>

                                <div class="layui-input-block" >
                                    <input type="text" name="code"   lay-verify="" placeholder="请输验证码" autocomplete="off" class="layui-input" style="width: 100%;">

                                </div>

                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="register">立即申请</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置表单</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
</body>
</html>
<script>

    layui.use('form',function (){
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;


        form.on('submit(register)',function (data){
            if($("#userPassword_").val() === $("#userPassword").val()){
                $.ajax({
                    url: '/user/adminRegister',
                    method: 'post',
                    data: data.field,
                    dataType: 'JSON',
                    success: function (res){
                        if (res == 1){
                            layer.open({
                                type: 0,
                                area: '300px',
                                moveOut: false,
                                closeBtn: false,
                                shade: 0.8,
                                btn: ['去登陆页面', '留在当前页面'],
                                btnAlign: 'c',
                                content: `<div style="width: 100%;text-align: center">
                                        <h2>已发出申请！</h2>
                                      </div>`,
                                yes: function (){
                                    window.location.href = "/page/learnerLogin";
                                }
                            })
                        }
                        if (res == 2){
                            layer.open({
                                type: 0,
                                area: '300px',
                                moveOut: false,
                                closeBtn: false,
                                shade: 0.8,
                                btn: ['我知道了'],
                                btnAlign: 'c',
                                content: `<div style="width: 100%;text-align: center">
                                <h2>该账号已存在！</h2>
                              </div>`,
                            })
                        }
                        if (res == 3){
                            layer.open({
                                type: 0,
                                area: '300px',
                                moveOut: false,
                                closeBtn: false,
                                shade: 0.8,
                                btn: ['我知道了'],
                                btnAlign: 'c',
                                content: `<div style="width: 100%;text-align: center">
                                <h2>请输入验证码！</h2>
                              </div>`,
                            })
                        }
                        if (res == 4){
                            layer.open({
                                type: 0,
                                area: '300px',
                                moveOut: false,
                                closeBtn: false,
                                shade: 0.8,
                                btn: ['我知道了'],
                                btnAlign: 'c',
                                content: `<div style="width: 100%;text-align: center">
                                <h2>验证码错误！</h2>
                              </div>`,
                            })
                        }
                        if (res == 5){
                            layer.open({
                                type: 0,
                                area: '300px',
                                moveOut: false,
                                closeBtn: false,
                                shade: 0.8,
                                btn: ['我知道了'],
                                btnAlign: 'c',
                                content: `<div style="width: 100%;text-align: center">
                                <h2>验证码已过期！</h2>
                              </div>`,
                            })
                        }
                    }
                },JSON);
            }else {
                layer.open({
                    type: 0,
                    area: '300px',
                    moveOut: false,
                    closeBtn: false,
                    shade: 0.8,
                    btn: ['我知道了'],
                    btnAlign: 'c',
                    content: `<div style="width: 100%;text-align: center">
                                <h2>对不起，两次密码不一致，请检查！</h2>
                              </div>`,
                })
            }

            return false;
        });
        form.on('submit(sendCode)',function (data){

            $.ajax({
                url: '/user/sendCode',
                method: 'post',
                data: data.field,
                dataType: 'JSON',
                success: function (res){
                    if (res == 1){
                        layer.open({
                            type: 0,
                            area: '300px',
                            moveOut: false,
                            closeBtn: false,
                            shade: 0.8,
                            btn: ['我知道了'],
                            btnAlign: 'c',
                            content: `<div style="width: 100%;text-align: center">
                                <h2>验证码已发送！</h2>
                              </div>`,
                        })
                    }  if (res == 0){
                        layer.open({
                            type: 0,
                            area: '300px',
                            moveOut: false,
                            closeBtn: false,
                            shade: 0.8,
                            btn: ['我知道了'],
                            btnAlign: 'c',
                            content: `<div style="width: 100%;text-align: center">
                                <h2>一天只能发送三次</h2>
                              </div>`,
                        })
                    }
                    if (res == 2){
                        layer.open({
                            type: 0,
                            area: '300px',
                            moveOut: false,
                            closeBtn: false,
                            shade: 0.8,
                            btn: ['我知道了'],
                            btnAlign: 'c',
                            content: `<div style="width: 100%;text-align: center">
                                <h2>redis数据库未开启！</h2>
                              </div>`,
                        })
                    }
                }
            },JSON);


            return false;
        });
    });

</script>